<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="layui-elem-field layui-field-title">
            <legend>添加专业</legend>
        </fieldset>
        <form class="layui-form" action="" id="majorAddForm" lay-filter="majorAddFormFilter">

            <div class="layui-form-item">
                <label class="layui-form-label">院系<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <select id="college" name="college" lay-filter="college" lay-verify="required" lay-reqtext="院系为必填项">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">专业名称<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input"
                           id="name" name="name"
                           lay-verify="required|name" placeholder="请输入专业名称"
                           autocomplete="off" lay-reqtext="专业名称为必填项">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">专业代号<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input"
                           id="code" name="code"
                           lay-verify="required|code" placeholder="请输入专业代号"
                           autocomplete="off" lay-reqtext="专业代号为必填项">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn " lay-submit="" lay-filter="majorSaveBtn">添加专业</button>
                </div>
            </div>
        </form>

    </div>
</div>

<script>
    layui.use(['form'],function () {

        var form=layui.form,
            layer=layui.layer,
            $= layui.$;

        form.render();

        $("#name").blur(function(){
            var value = this.value;
            if(typeof value == "undefined" || value == null || value == ""){
                layer.msg("专业名称为必填项！",{icon:5});
            }else if(/^[\u4e00-\u9fa5]{2,15}$/.test(value)==false){
                layer.msg("专业名称为 2-15 个汉字!",{icon:5});
            }
        })
        $("#code").blur(function () {
            var value = this.value;
            var reg = /^\d{1,11}$/;
            if (typeof value == "undefined" || value == null || value == "") {
                layer.msg("院系编号为必填项！", {icon: 5});
            } else if (reg.test(value) == false) {
                layer.msg("院系代号为1-11 位的数字!", {icon: 5});
            }
        })
        form.verify({
            name:function (value) {
                if(/^[\u4e00-\u9fa5]{2,15}$/.test(value)==false){
                    return '专业名称为 2-15 个汉字'
                }
            },

            //不能有特殊字符和数字；可以输入英文，可以有空格，可以输入英文名字中的点，可以输入汉字，中文英文不能同时出现，长度在1-20
            code: function (value) {
                var reg = /^\d{1,11}$/;
                if (typeof value == "undefined" || value == null || value == "") {
                    return '院系编号为必填项！'
                } else if (reg.test(value) == false) {
                    return '院系代号为1-11 位的数字! '
                }
            }

        });


        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        //监听提交
        form.on('submit(majorSaveBtn)', function (data) {
            let url = 'MajorServlet';
            let params = {method:'add',
                                 college:data.field.college,
                                 name:data.field.name,
                                 code:data.field.code};
            let fn = function (res) {
                if (res == 'true') {
                    layer.close(parentIndex);
                    layer.msg("添加成功",{icon: 1});
                    $('#majorAddForm')[0].reset();
                    form.render();
                    if("undefined" != typeof parent){
                        parent.layui.table.reload('currentTableId');
                    }
                }
            };
            $.post(url, params, fn);

            //return false;
        });


        let url = 'CollegeServlet';
        let params = {method:'search'};
        let successFn = function (res) {
            res = JSON.parse(res);
            let json =res;
            for (let i=0;i<json.data.length;i++) {
                $('#college').append("<option value='"+json.data[i].id+"'>"+json.data[i].name+"</option>");
            }

            //页面加载时，把院系的数据查询出来，并赋值给下拉框
            form.render('select');
        }
        $.get(url, params, successFn);

        //当操作涉及到数据更新用post，如果只是数据查询，并不涉及更新就用get

    })
</script>

</body>
</html>